<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
		  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Youdao Dictionary Extension</title></head>
  <body>
	<form name="setting-form" action="#set-profile" method="POST">
		<input type="checkbox" id="enable-query" name="enable-query" value="1" title="(双击或者按住ctrl鼠标取词)"/>
		<label for="enable-query" title="(双击或者按住ctrl鼠标取词)">屏幕取词</label>
	</form>
	<form name="query-youdao-dict" action="#query" method="POST">
		<input type="text" name="word" value=""/><button type="submit">GO</button>
	</form>
	<div style="max-width: 500px; min-width: 200px; height: auto;" id="result"></div>
	<script type="text/javascript">
	chrome.extension.sendRequest({action: 'check-query-enabled'}, function(enabled){
		if (enabled)
			document.getElementById('enable-query').setAttribute('checked', 'checked');
		else
			document.getElementById('enable-query').removeAttribute('checked');
	});
	document.getElementById('enable-query').onclick = function(){
		chrome.extension.sendRequest({action: 'enable-query', enabled: this.checked});
	}
	document.forms["query-youdao-dict"].elements['word'].focus();
	document.forms["query-youdao-dict"].onsubmit = function(){
		var word = this.elements['word'].value;
		if( !word ){
			return false;
		}
		chrome.extension.sendRequest({action: 'query-dict', word: word}, onQuery);
		return false;
	}
	function onQuery(data){
		var a = document.createElement('a')
		a.target = '_blank';

		if( data.returnPhrase == 'null' ){
			text = 'no such words ';
			a.href = 'http://dict.youdao.com/search?q=' + encodeURIComponent(data.originalQuery);
			a.innerHTML = data.originalQuery;
		}else{
			var translate = '<p style="margin:1px; padding:0">' + data.customTranslation.content.join('<br/>') + '</p>';
			var pronouce = data.phoneticSymbol ? '<p style="margin:1px; padding:0">[' + data.phoneticSymbol + ']</p>' : '';
			var word = '<strong>' + data.returnPhrase + '</strong>'
			text = word + pronouce + translate;

			a.href = data.yodaoLink;
			a.innerHTML = data.returnPhrase;
		}
		var r = document.getElementById('result')
		r.innerHTML = text + '<br/>';
		r.appendChild(a);
		document.forms["query-youdao-dict"].elements['word'].focus();
	}
	</script>
  </body>
</html>
